<template>
  <div class="root">
    <div class="list">
      <div class="list-wrapper">
        <div class="list-item" v-for="item in houses" :key="item.id">
          <div class="flex">
            <div>{{ item.title }}</div>
            <div>{{ item.des }}</div>
            <div>{{ item.address }}</div>
            <div>￥{{ item.price }}晚</div>
          </div>
        </div>
      </div>
    </div>
    <div class="pagination">分页器</div>
  </div>
</template>
<script>
export default {
  name: "MyCard",
  props: {
    houses: {
      type: Array,
    },
  },
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/*根节点样式*/
.root {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

/*操作按钮栏样式*/
.root > .operate {
  width: 100%;
  text-align: right;
  padding: 10px;
  background-color: pink;
}

/*列表盒子样式，自动充满页面剩余高度*/
.root > .list {
  width: 100%;
  flex: 1;
  height: 0;
  overflow: auto;
}

/*列表元素最外层必要有一个没有宽高的div包裹，该div大小由元素撑开*/
.root > .list > .list-wrapper {
  display: flex;
  flex-wrap: wrap;
}

/*列表元素样式*/
.root > .list > .list-wrapper > .list-item {
  width: 16%;
  height: 300px;
  line-height: 300px;
  text-align: center;
  color: #fff;
  background-color: deepskyblue;
  margin: 0 calc(4% / 6 / 2) 20px calc(4% / 6 / 2);
}

/*分页组件栏样式*/
.root > .pagination {
  width: 100%;
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.3);
  text-align: center;
}
</style>
